<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>根据古诗类型的页面《唐诗300首》</title>
</head>
<body>
<header id="header"></header>

<div class="container">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="/">首页</a></li>
            <li class="breadcrumb-item" aria-current="page">诗词大全</li>
        </ol>
    </nav>


    <div class="row" id="poemsToType">
        <div class="col col-sm-12 col-lg-12">
            <!--<div class="card ">
                <div class="card-body">
                    <h4 class="card-title">黄河夜泊</h4>
                    <p>
                        <a href="Dynasty.html">明代</a>·
                        <a href="author.html">李流芳</a>
                    </p>
                    <div>

                        明月黄河夜，寒沙似战场。<br>奔流聒地响，平野到天荒。<br>吴会书难达，燕台路正长。<br>男儿少为客，不辨是他乡。

                    </div>
                    <div class="mt-2">
                        <a class="badge badge-secondary">黄河</a>
                        <a class="badge badge-secondary">抒怀</a>
                        <a class="badge badge-secondary">惆怅</a>
                    </div>
                </div>
            </div>-->
            <div class="card mt-3" v-for="poem in poems">
                <div class="card-body">
                    <h4 class="card-title"><a :href="'poem.html?'+poem.title" v-text="poem.title">风雨吟</a></h4>
                    <p>
                        <a :href="'Dynasty.html?'+poem.chaodai" v-text="poem.chaodai">明代</a>·
                        <a :href="'author.html?'+poem.zuozhe" v-text="poem.zuozhe">李流芳</a>
                    </p>
                    <div v-html="poem.body">

                        <p>风风雨雨江头路，多少离人从此去。欲将别泪寄黄溪，昨日黄溪在何处。</p><p>归帆一挂不可收，西泠桥边人倚楼。独酌孤眠不成夜，又教风雨伴侬愁。</p>

                    </div>
                </div>
            </div>
            <!--<div class="card mt-3">
                <div class="card-body">
                    <h4 class="card-title"><a href="/shici/4395">题画似雪峤师 其二</a></h4>
                    <p>
                        <a href="/shicis/cd-ming">明代</a>·
                        <a href="/author/78729">李流芳</a>
                    </p>
                    <div>

                        <p>远公一别又三年，寒雨俄停霅上船。尚有当年馀习在，从师参取画中禅。</p>

                    </div>
                    <div class="mt-2">
                    </div>
                </div>
            </div>
            <div class="card mt-3">
                <div class="card-body">
                    <h4 class="card-title"><a href="/shici/19871">滕县道中</a></h4>
                    <p>
                        <a href="/shicis/cd-ming">明代</a>·
                        <a href="/author/78729">李流芳</a>
                    </p>
                    <div>

                        山欲开云柳乍风，杜梨花白小桃红。<br>三年三月官桥路，策蹇经过似梦中。

                    </div>
                    <div class="mt-2">
                    </div>
                </div>
            </div>
            <div class="card mt-3">
                <div class="card-body">
                    <h4 class="card-title"><a href="/shici/19872">自青芝看花至茶山憩山头石上感旧</a></h4>
                    <p>
                        <a href="/shicis/cd-ming">明代</a>·
                        <a href="/author/78729">李流芳</a>
                    </p>
                    <div>

                        <p>缘山数十里，步步入香径。看花宜舆行，神逸目始定。</p><p>茶山不数仞，登览撮其胜。襟湖带长岫，高下目无剩。</p><p>众花争献态，卷石似得柄。大千观掌现，世界琉璃净。</p><p>昔来我独赏，近乃游者竞。廿年怀卜筑，贫老苦奔迸。</p><p>愧此五浮丘，后期犹可订。</p>

                    </div>
                    <div class="mt-2">
                    </div>
                </div>
            </div>
            <div class="card mt-3">
                <div class="card-body">
                    <h4 class="card-title"><a href="/shici/19873">重题荃之书兰</a></h4>
                    <p>
                        <a href="/shicis/cd-ming">明代</a>·
                        <a href="/author/78729">李流芳</a>
                    </p>
                    <div>

                        <p>秋风兰若长干客，丛树阴阴小窗碧。千里间关迟子来，残灯细语为谁剧。</p><p>当时子画我作诗，今日开看已陈迹。我昨送子寒城东，荒草茫茫掩阡陌。</p><p>肠摧泪竭无奈何，手泽相誇竟何益。吁嗟乎人生不死空有情，惭愧傍人知爱惜。</p>

                    </div>
                    <div class="mt-2">
                    </div>
                </div>
            </div>
            <div class="card mt-3">
                <div class="card-body">
                    <h4 class="card-title"><a href="/shici/19874">题画似雪峤师 其一</a></h4>
                    <p>
                        <a href="/shicis/cd-ming">明代</a>·
                        <a href="/author/78729">李流芳</a>
                    </p>
                    <div>

                        <p>千山顶上只通云，一水人家别有村。直到前山兰若路，清钟落日不逢君。</p>

                    </div>
                    <div class="mt-2">
                    </div>
                </div>
            </div>
            <div class="card mt-3">
                <div class="card-body">
                    <h4 class="card-title"><a href="/shici/19875">送汪君彦同项不损燕游兼呈不损</a></h4>
                    <p>
                        <a href="/shicis/cd-ming">明代</a>·
                        <a href="/author/78729">李流芳</a>
                    </p>
                    <div>

                        <p>汪生昨自欈李还，忽然向我谭长安。自言指日长安去，及此春深花事阑。</p><p>嗟乎汪生何太迂，少年不肯守床帏，因人远役将何为。</p><p>我是长安旧游人，三年一度长安春。如今怕说长安道，送子忽忽伤心魂。</p><p>长安城中有何好，惟有十丈西风尘。人畜粪土相和匀，此物由来无世情。</p><p>贵人逢之亦入唇，其味不减庖厨珍。别有高梁桥下水，柳色一湾尘似洗。</p><p>从此沿流向玉泉，湖山亦有江南意，充君画本差可耳。</p><p>君不闻京师画工如布粟，闽中吴彬推老宿。前年供御不称旨，褫衣受挞真?畜。</p><p>此事下贱不可为，君但自娱勿干禄。吾友重瞳之孙气食牛，万金散尽图千秋。</p><p>一朝掉头出门去，为我问之何所求。君应朝夕进苦口，勉之闭门发策勿妄侈交游。</p>

                    </div>
                    <div class="mt-2">
                    </div>
                </div>
            </div>
            <div class="card mt-3">
                <div class="card-body">
                    <h4 class="card-title"><a href="/shici/19876">江南春二首</a></h4>
                    <p>
                        <a href="/shicis/cd-ming">明代</a>·
                        <a href="/author/78729">李流芳</a>
                    </p>
                    <div>

                        <p>锦绷簇簇东园笋，宿雨初收池面静。柳条欲织画檐丝，花枝为写疏帘影。</p><p>寒食风来山店冷，辘轳声杳胭脂井。山前日暮鸟衔巾，绣陌香泥闇曲尘。</p><p>莺声迟，花信急，裛露穿花罗袖湿。常恐春归欢不及，飞红尽处千林碧。</p><p>不见花洲旧吴邑，洲上要离冢犹立。杨花满洲生绿萍，百年易度胡营营。</p>

                    </div>
                    <div class="mt-2">
                    </div>
                </div>
            </div>
            <div class="card mt-3">
                <div class="card-body">
                    <h4 class="card-title"><a href="/shici/19877">江南春二首 其二</a></h4>
                    <p>
                        <a href="/shicis/cd-ming">明代</a>·
                        <a href="/author/78729">李流芳</a>
                    </p>
                    <div>

                        <p>天平山头石如笋，松阴落日游人静。射渎千帆曳练光，胥山万水留寒影。</p><p>响屧廊空履痕冷，馆娃旧事沉宫井。鸱夷归来裹角巾，吴台越榭皆烟尘。</p><p>春水生，春潮急，西泠渡头莎岸湿。我欲渡江潮已及，对岸千峰万峰碧。</p><p>阖闾勾践空城邑，男儿功名几时立。眼看身世如漂萍，驱车策马将何营。</p>

                    </div>
                    <div class="mt-2">
                    </div>
                </div>
            </div>-->
            <nav class="mt-3">
                <ul class="pagination pagination-sm  justify-content-center">
                    <li class="page-item">
                        <a class="page-link" aria-label="Previous" href="" @click.prevent="loadPoemsType(pageinfo.prePage)" v-show="!pageinfo.isFirstPage==true">
                            <span aria-hidden="true">&laquo;</span>
                            <span class="sr-only">上一页</span>
                        </a>
                    </li>
                    <!--<li class="page-item "><a class="page-link" href="" @click.prevent="loadPoems(1)">1</a></li>
                    <li class="page-item "><a class="page-link" href="" @click.prevent="loadPoems(2)">2</a></li>
                    <li class="page-item "><a class="page-link" href="" @click.prevent="loadPoems(3)">3</a></li>
                    <li class="page-item "><a class="page-link" href="" @click.prevent="loadPoems(4)">4</a></li>
                    <li class="page-item "><a class="page-link" href="" @click.prevent="loadPoems(5)">5</a></li>
                    <li class="page-item "><a class="page-link" href="" @click.prevent="loadPoems(6)">6</a></li>-->
                    <li class="page-item" v-for="n in pageinfo.navigatepageNums">
                        <a class="page-link" href="" v-text="n" @click.prevent="loadPoemsType(n)"
                           :class="{'bg-secondary text-light': n == pageinfo.pageNum}">1</a>
                    </li>
                    <!--<li class="page-item">
                        <a class="page-link " href="#" v-for="n in pageinfo.navigatepageNums" @click.prevent="loadPoems(n)"
                           v-text="n" :class="{'bg-secondary text-light': n == pageinfo.pageNum}">1</a>
                    </li>-->
                    <li class="page-item "><a class="page-link" href="">
                        <span aria-hidden="true">当前页<span  v-text="pageinfo.pageNum">5</span></span>
                    </a></li>
                    <li class="page-item">
                        <a class="page-link" aria-label="Next" href="" @click.prevent="loadPoemsType(pageinfo.nextPage)" v-show="!pageinfo.isLastPage==true">
                            <span aria-hidden="true">&raquo;</span>
                            <span class="sr-only">下一页</span>
                        </a>
                    </li>

                    <li class="page-item" >
                        <span aria-hidden="true">跳转到</span>
                        <input type="text" style="width: 50px" id="page"><button @click.prevent="JumpPoems()">跳转</button>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>

<footer id="footer"></footer>
</body>
<!--引入jq代码-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 引入axios 实现页面的异步请求-->
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
    $("#header").load("common/navigation.html")
    $("#footer").load("common/footer.html")

    // 获取地址栏的内容
    let typeName = decodeURI(location.search.split("?")[1]);
    console.log("获取的类型名： " + typeName)
    let poems_type = new Vue({
        el:"#poemsToType",
        data:{
            poems:[],
            pageinfo:{},
            pages:""
        },
        methods:{
            loadPoemsType:function (pageNum) {
                if (!pageNum){
                    pageNum = 1;
                }
                axios({
                    url:"poems/findListByTypeName/" + typeName,
                    method:"GET",
                    params:{
                        pageNum:pageNum
                    }
                }).then(function (r) {
                    poems_type.poems = r.data.list;
                    poems_type.pageinfo = r.data;
                    poems_type.pages = r.data.pages;
                })
            },
            JumpPoems:function () {
                let page = document.getElementById("page").value;
                if (page <= poems_type.pageinfo.pages && page > 0){
                    this.loadPoemsType(page)
                }else {
                    alert("页码不对，请重新输入！！最大页码为： " + poems_type.pages)
                    $("#page").val('');
                }
            }
        },
        created:function () {
            this.loadPoemsType(1);
        }
    })
</script>
</html>